<template>
  <el-tabs :tab-position="tabPosition">
    <el-tab-pane label="基本信息">
      <el-row class="goods-row">
        <el-col :span="12">
          <span class="goods-label">商品名称</span>
          <span class="goods-value">{{ goodsForm.info.name }}</span>
        </el-col>
        <el-col :span="12">
          <span class="goods-label">商品简介</span>
          <span class="goods-value">{{ goodsForm.info.goods_brief }}</span>
        </el-col>
      </el-row>
      <el-row class="goods-row">
        <el-col :span="12">
          <span class="goods-label">商品价格</span>
          <span class="goods-value">{{ Math.round(goodsForm.info.retail_price * 100) / 100 }}</span>
        </el-col>
        <el-col :span="12">
          <span class="goods-label">商品编码</span>
          <span class="goods-value">{{ goodsForm.info.goods_sn }}</span>
        </el-col>
      </el-row>
    </el-tab-pane>
    <el-tab-pane label="商品属性">
      <el-form label-width="70px">
        <el-form-item v-for="item in goodsForm.attribute" :key="item.value" :label="item.name"
                      class="goods-form-item demo-table-expand">
          <span>{{ item.value }}</span>
        </el-form-item>
      </el-form>
    </el-tab-pane>
    <el-tab-pane label="轮播图">
      <el-carousel :interval="4000" type="card" height="200px">
        <el-carousel-item v-for="item in goodsForm.gallery" :key="item.id">
          <el-image :src="item.img_url"
          ></el-image>
        </el-carousel-item>
      </el-carousel>
    </el-tab-pane>
    <el-tab-pane label="详情图">
      <el-carousel :interval="4000" type="card" height="200px">
        <el-carousel-item v-for="item in goodsForm.imageText" :key="item.id">
          <el-image :src="item.img_url"
          ></el-image>
        </el-carousel-item>
      </el-carousel>
    </el-tab-pane>
  </el-tabs>
</template>

<script>
export default {
  name: 'GoodsDetail',
  props: {
    goodsForm: {
      type: Object,
      default () {
        return {
          info: {},
          attribute: [],
          gallery: [],
          imageText: [],
          productList: []
        }
      }
    }
  },
  data () {
    return {
      tabPosition: 'left'
    }
  }
}
</script>

<style>
/*
  有scope，el-form的label颜色改不掉
 */
.demo-table-expand {
  font-size: 0;
}

.demo-table-expand .el-form-item__label {
  width: 90px;
  color: #99a9bf;
}

.goods-label {
  width: 90px;
  color: #99a9bf;
}

.goods-value {
  margin-left: 30px;
}

.goods-form-item {
  margin-bottom: 0px;
}

.goods-row {
  margin-top: 20px;
}

</style>
